<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>page</title>

    <!-- Bootstrap core CSS -->
    <link href="../res/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../res/css/navbar-fixed-top.css" rel="stylesheet">
    <link rel="stylesheet" href="../res/css/common.css">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>

    <![endif]-->


    <link rel="stylesheet" href="../res/plugins/select2/css/select2.css">

  </head>

  <body>

	<ul id="example"></ul>
    <div id="alert-content"></div>
    <div id="alert-content1"></div>


    <div id="employee-pagination" class="row pagination-wrap">
        <div class="col-sm-6 pagination-info">
            当前第1页/总计100页(1000行),每页显示
            <select name="" id="" class="form-control page-size">
                <option value="">10</option>
                <option value="">20</option>
                <option value="">50</option>
                <option value="">100</option>
                <option value="">200</option>
                <option value="">500</option>
            </select>
            行
            &nbsp;&nbsp;<input type="text" class="form-control jump-input"/>
            <button class="btn btn-default btn-sm jump-btn">GO</button>
        </div>
        <div class="col-sm-6 pagination-page">
            <ul class="pagination-ul"></ul>
        </div>
    </div><!-- pagination end-->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../res/plugins/jquery/jquery-2.2.0.min.js"></script>
    <script src="../res/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../res/plugins/bootstrap/js/ie10-viewport-bug-workaround.js"></script>
    <script src="../res/plugins/select2/js/select2.full.js"></script>
    
    <script src="../res/plugins/bootstrap-paginator/bootstrap-paginator.min.js"></script>


	<script>
		var options = {
            bootstrapMajorVersion : 3,
            currentPage: 3,
            totalPages: 100,
            numberOfPages:8,
            itemTexts: function (type, page, current) {
                    switch (type) {
                    case "first":
                        return "«";
                    case "prev":
                        return "‹";
                    case "next":
                        return "›";
                    case "last":
                        return "»";
                    case "page":
                        return page;
                    }
            },
            tooltipTitles: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "尾页";
                    case "page":
                        return  page;
                }
            },
            onPageClicked: function(e,originalEvent,type,page){
                $('#alert-content').text("Page item clicked, type: "+type+" page: "+page);
            },
            onPageChanged: function(e,oldPage,newPage){
                $('#alert-content1').text("Current page changed, old: "+oldPage+" new: "+newPage);
            }
        }

        $('#example').bootstrapPaginator(options);
        $('#employee-pagination .pagination-ul').bootstrapPaginator(options);
        var obj = $('#example').bootstrapPaginator('getPages');
        console.log(obj);
        console.log(obj['current']);
        console.log(obj['first']);

        $("#employee-pagination").pagination({
            onPageSelectChanged : function(e,value){
                alert(0);
            },
            onPageJumpClicked : function(e,value){
                alert(1);
            },
            onPaginationChanged : function(){
                alert(2);
            }
        });
	</script>

  </body>
</html>
